<template>
  <!-- 单单位 -->
  <div class="hidden-danger-rectification-wrap">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="$store.state.userinfo.isMuilUnitUser === 1">
        <el-select filterable @change="getList(1)" v-model="searchForm.orgIds" placeholder="请选择业主单位">
          <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.findTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="util.intTimePickerOptions()"
          @change="getList(1)"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select filterable @change="getList(1)" v-model="searchForm.gradeId" placeholder="请选择隐患等级">
          <el-option label="全部隐患等级" value></el-option>
          <el-option v-for="item in gradeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select filterable @change="getList(1)" v-model="searchForm.categoryId" placeholder="请选择隐患类型">
          <el-option label="全部隐患类型" value></el-option>
          <el-option v-for="item in categoryOptions" :key="item.id" :label="item.text" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select filterable @change="getList(1)" v-model="searchForm.status" placeholder="请选择隐患状态">
          <el-option label="全部隐患状态" value></el-option>
          <el-option label="待指派" value="5"></el-option>
          <el-option label="整改中" value="1"></el-option>
          <el-option label="核实中" value="3"></el-option>
          <el-option label="已完成" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.hiddenDangerDesc" placeholder="请输入隐患描述" @keyup.enter.native="getList(1)"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
      </el-form-item>
      <el-form-item class="more-btns right-btn">
        <el-button type="primary" @click="addTrouble()">新增</el-button>
        <el-button type="primary" @click="outputInfo()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-row class="overview-wrap" :gutter="40" type="flex" justify="space-between">
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-1">{{ governanceStatistics.orgNum }}</p>
          <p class="item-title">隐患单位数</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-2">{{ governanceStatistics.totalNum }}</p>
          <p class="item-title">隐患总数</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-8">{{ governanceStatistics.overdueNum }}</p>
          <p class="item-title">超期隐患</p>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" ref="mainTable" style="width: 100%">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="图片/视频" prop="picUrls" width="100">
        <template slot-scope="scope">
          <div>
            <img
              v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(scope.row.picUrls.split(',')[0].split('.')[scope.row.picUrls.split(',')[0].split('.').length - 1].toLowerCase())"
              :src="require('@/assets/images/video/video-detail.png')"
              @click="$imgViewer"
              :data-imgpreview="scope.row.picUrls"
              width="50px"
              height="50px"
            />
            <img
              v-else
              :src="scope.row.picUrls.split(',')[0]"
              @click="$imgViewer"
              :data-imgpreview="scope.row.picUrls"
              width="50px"
              height="50px"
              alt
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="$store.state.userinfo.isMuilUnitUser === 1" label="所在单位" prop="orgName"></el-table-column>
      <el-table-column label="描述" prop="hiddenDangerDesc" width="300"></el-table-column>
      <el-table-column label="语音" prop="hiddenDangerVoice" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.hiddenDangerVoice != ''" style="display:flex;align-items:center;">
            <p :class="'weixinAudio_'+scope.row.id" @click="playAudio(scope.row.id, scope.row.hiddenDangerVoice)">
              <audio :src="scope.row.hiddenDangerVoice" id="media" width="1" height="1" preload></audio>
              <span id="audio_area" class="db audio_area">
                <div class="audio_wrp db">
                  <span class="audio_play_area">
                    <i class="icon_audio_default"></i>
                    <i class="icon_audio_playing"></i>
                  </span>
                  <span id="audio_length" class="audio_length tips_global"></span>
                  <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                </div>
              </span>
            </p>
            <el-button
              type="text"
              @click="handleDownload(scope.row.hiddenDangerVoice,scope.row.id)"
              style="margin-left:10px;"
            >下载</el-button>
          </div>
          <p v-else>暂无录音</p>
        </template>
      </el-table-column>
      <el-table-column label="等级" prop="gradeName"></el-table-column>
      <el-table-column label="类型" prop="categoryName"></el-table-column>
      <el-table-column label="状态" prop="status" width="150">
        <template slot-scope="scope">
          <span :class="'tatus-icon-tags ' + formatterStatusColor(scope.row.status)"></span>
          {{formatterStatus(scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column label="是否超期" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.isTimeOut == 1" class="type-tags type-color-1">超期</div>
          <div v-else class="type-tags type-color-3">未超期</div>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createAccountName" width="120"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
          <span
            class="dividing-line"
            v-if="$store.state.buttonPermission[$store.state.currentTabName].indexOf('delHidden') > -1"
          >|</span>
          <el-button
            @click="deleteInfo(scope.row)"
            type="text"
            size="small"
            v-if="$store.state.buttonPermission[$store.state.currentTabName].indexOf('delHidden') > -1"
          >删除</el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <div v-loading="timeLineLoading[scope.row.id]" class="block">
            <el-tabs type="border-card" v-model="defaultTabsName[scope.row.id]">
              <el-tab-pane name="hiddenDangerInfo">
                <span slot="label">更多信息</span>
                <el-form v-if="hiddenDangerInfo[scope.row.id]" label-width="120px" class="demo-table-expand">
                  <el-form-item label="责任人">
                    <span>{{ hiddenDangerInfo[scope.row.id].chargePersonName }}</span>
                  </el-form-item>
                  <el-form-item label="指派人">
                    <span>{{ hiddenDangerInfo[scope.row.id].managerPersonName || hiddenDangerInfo[scope.row.id].createAccountName }}</span>
                  </el-form-item>
                  <el-form-item label="隐患位置">
                    <span>{{ hiddenDangerInfo[scope.row.id].addrDesc }}</span>
                  </el-form-item>
                  <el-form-item label="相关资产">
                    <span>{{ hiddenDangerInfo[scope.row.id].relateAssetsNames || '-' }}</span>
                  </el-form-item>
                  <el-form-item label="相关物联设备">
                    <span>{{ hiddenDangerInfo[scope.row.id].relateFcfNames || '-' }}</span>
                  </el-form-item>
                  <el-form-item label="所属消防系统">
                    <span>{{ hiddenDangerInfo[scope.row.id].systemName || '-' }}</span>
                  </el-form-item>
                  <el-form-item label="整改期限">
                    <span>{{ hiddenDangerInfo[scope.row.id].endTime }}</span>
                  </el-form-item>
                  <el-form-item label="现场图片/视频">
                    <div style="display: flex;">
                      <div v-for="(item, index) in scope.row.picUrls.split(',')" :key="index" style="margin: 0 4px;">
                        <img
                          v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(item.split('.')[item.split('.').length - 1].toLowerCase())"
                          :src="require('@/assets/images/video/video-detail.png')"
                          @click="$imgViewer"
                          :data-imgpreview="scope.row.picUrls"
                          :data-imgpreviewindex="index"
                          width="50px"
                          height="50px"
                        />
                        <img
                          v-else
                          :src="item"
                          @click="$imgViewer"
                          :data-imgpreview="scope.row.picUrls"
                          :data-imgpreviewindex="index"
                          width="50px"
                          height="50px"
                          alt
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
                <p v-else style="text-align: center;">暂无信息</p>
              </el-tab-pane>
              <el-tab-pane name="hiddenDangerRecord">
                <span slot="label">整改记录</span>
                <el-timeline v-if="hiddenDangerInfo[scope.row.id] && hiddenDangerInfo[scope.row.id].id">
                  <template v-for="(item, index) in hiddenDangerInfo[scope.row.id].details">
                    <!-- 指派 -->
                    <el-timeline-item
                      v-if="item.type==3"
                      :key="item.id"
                      :timestamp="'指派时间：' + util.transNullundefinedToline(item.updateTime)"
                      placement="top"
                    >
                      <el-card>
                        <!-- <p>指派描述：{{util.transNullundefinedToline(item.detailDesc) || '无'}}</p> -->
                        <p>由{{ hiddenDangerInfo[scope.row.id].managerPersonName || hiddenDangerInfo[scope.row.id].createAccountName }}指派{{ hiddenDangerInfo[scope.row.id].chargePersonName }}为责任人</p>
                      </el-card>
                    </el-timeline-item>
                    <template v-else-if="item.type == 1">
                      <!-- 核实通过 -->
                      <el-timeline-item
                        v-if="hiddenDangerInfo[scope.row.id].status == 2 && index == 0"
                        :key="item.id"
                        :timestamp="'核实时间：' + util.transNullundefinedToline(item.updateTime)"
                        placement="top"
                      >
                        <el-card>
                          <div v-if="item.picUrls">
                            <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                              <img
                                v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                                :src="require('@/assets/images/video/video-detail.png')"
                                @click="$imgViewer"
                                :data-imgpreview="item.picUrls"
                                :data-imgpreviewindex="i"
                                width="50px"
                                height="50px"
                              />
                              <img
                                v-else
                                @click="$imgViewer"
                                :data-imgpreview="item.picUrls"
                                :data-imgpreviewindex="i"
                                class="imgContainer-edit"
                                style="margin: 10px;"
                                :src="obj||GLOBAL.defaultImg"
                                alt="隐患图片"
                                width="100px"
                                height="100px"
                              />
                            </div>
                          </div>
                          <!-- 录音 -->
                          <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                            <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                              <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                              <span id="audio_area" class="db audio_area">
                                <div class="audio_wrp db">
                                  <span class="audio_play_area">
                                    <i class="icon_audio_default"></i>
                                    <i class="icon_audio_playing"></i>
                                  </span>
                                  <span id="audio_length" class="audio_length tips_global"></span>
                                  <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                </div>
                              </span>
                            </p>
                            <el-button
                              type="text"
                              @click="handleDownload(item.detailVoiceUrl,item.id)"
                              style="margin-left:10px;"
                            >下载</el-button>
                          </div>

                          <p>核实描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                          <p>由{{ util.transNullundefinedToline(item.createAccountName) }}核实通过</p>
                        </el-card>
                      </el-timeline-item>
                      <!-- 整改 -->
                      <el-timeline-item
                        v-else
                        :key="item.id"
                        :timestamp="'整改时间：' + util.transNullundefinedToline(item.updateTime)"
                        placement="top"
                      >
                        <el-card>
                          <template v-if="item.isStopSystem == 1">
                            <el-tag type="warning">停用系统</el-tag>
                            <p>开始停用时间：{{util.transNullundefinedToline(item.stopStartTime)}}</p>
                            <p>结束停用时间：{{util.transNullundefinedToline(item.stopEndTime)}}</p>
                            <p>安全措施：{{util.transNullundefinedToline(item.safetyMethod)}}</p>
                          </template>
                          <el-tag v-else>不停用系统</el-tag>
                          <div v-if="item.picUrls">
                            <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                              <img
                                v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                                :src="require('@/assets/images/video/video-detail.png')"
                                @click="$imgViewer"
                                :data-imgpreview="item.picUrls"
                                :data-imgpreviewindex="i"
                                width="50px"
                                height="50px"
                              />
                              <img
                                v-else
                                @click="$imgViewer"
                                :data-imgpreview="item.picUrls"
                                :data-imgpreviewindex="i"
                                class="imgContainer-edit"
                                style="margin: 10px;"
                                :src="obj||GLOBAL.defaultImg"
                                alt="隐患图片"
                                width="100px"
                                height="100px"
                              />
                            </div>
                          </div>
                          <!-- 录音 -->
                          <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                            <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                              <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                              <span id="audio_area" class="db audio_area">
                                <div class="audio_wrp db">
                                  <span class="audio_play_area">
                                    <i class="icon_audio_default"></i>
                                    <i class="icon_audio_playing"></i>
                                  </span>
                                  <span id="audio_length" class="audio_length tips_global"></span>
                                  <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                </div>
                              </span>
                            </p>
                            <el-button
                              type="text"
                              @click="handleDownload(item.detailVoiceUrl,item.id)"
                              style="margin-left:10px;"
                            >下载</el-button>
                          </div>
                          <p>整改描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                          <p>由{{util.transNullundefinedToline(item.createAccountName)}}整改</p>
                        </el-card>
                      </el-timeline-item>
                    </template>
                    <!-- 驳回 -->
                    <el-timeline-item
                      v-else
                      :key="item.id"
                      :timestamp="'驳回时间：' + util.transNullundefinedToline(item.updateTime)"
                      placement="top"
                    >
                      <el-card>
                        <div v-if="item.picUrls">
                          <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                            <img
                              v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                              :src="require('@/assets/images/video/video-detail.png')"
                              @click="$imgViewer"
                              :data-imgpreview="item.picUrls"
                              :data-imgpreviewindex="i"
                              width="50px"
                              height="50px"
                            />
                            <img
                              v-else
                              @click="$imgViewer"
                              :data-imgpreview="item.picUrls"
                              :data-imgpreviewindex="i"
                              class="imgContainer-edit"
                              style="margin: 10px;"
                              :src="obj||GLOBAL.defaultImg"
                              alt="隐患图片"
                              width="100px"
                              height="100px"
                            />
                          </div>
                        </div>
                        <!-- 录音 -->
                        <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                          <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                            <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                            <span id="audio_area" class="db audio_area">
                              <div class="audio_wrp db">
                                <span class="audio_play_area">
                                  <i class="icon_audio_default"></i>
                                  <i class="icon_audio_playing"></i>
                                </span>
                                <span id="audio_length" class="audio_length tips_global"></span>
                                <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                              </div>
                            </span>
                          </p>
                          <el-button
                            type="text"
                            @click="handleDownload(item.detailVoiceUrl,item.id)"
                            style="margin-left:10px;"
                          >下载</el-button>
                        </div>
                        <p>驳回描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                        <p>由{{util.transNullundefinedToline(item.createAccountName)}}驳回</p>
                      </el-card>
                    </el-timeline-item>
                  </template>
                  <el-timeline-item
                    :timestamp="'创建时间：' + util.transNullundefinedToline(hiddenDangerInfo[scope.row.id].createTime)"
                    placement="top"
                  >
                    <el-card>
                      <p>由{{ hiddenDangerInfo[scope.row.id].createAccountName }}创建</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 新增隐患弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="新增隐患"
      width="600px"
      top="10vh"
      v-if="showTrouble"
      :visible.sync="showTrouble"
      @close="closeAddTrouble"
      v-dialogDrag
    >
      <add-trouble
        v-if="showTrouble"
        v-loading="showLoading"
        @show_loading="parentEvent"
        :oldInfo="hiddenTroubleInfo"
        :closeDialog="closeAddTrouble"
      ></add-trouble>
    </el-dialog>
  </div>
</template>

<script>
import '@/libs/weixinAudio'
import util from '@/utils/util'
import {
  getHiddenDangerList,
  getHiddenManagerStatistics,
  getHiddenDanger,
  delHiddenDangerById,
  outputHiddenDanger,
} from '@/api/hiddenDangerRectification'
import { getOrgList } from '@/api/org'
import { getDictByCode } from '@/api/dic'
import addTrouble from './hiddenTrouble'
import {
  downloadAudio,
  downloadExcel,
  objectToQueryString,
} from '@/utils/downloadUtil'

export default {
  name: 'HiddenDangerRectification',
  props: {
    parames: {
      //首页跳转的传参
      default() {
        return false
      },
    },
  },
  components: {
    addTrouble,
  },
  data() {
    return {
      util: util,
      loading: false,
      timeLineLoading: {},
      orgOptions: [],
      gradeOptions: [],
      categoryOptions: [],
      searchForm: {
        orgIds:
          this.$store.state.userinfo.isMuilUnitUser === 1
            ? this.$store.state.userinfo.organizationIds
            : this.$store.state.userinfo.org.id,
        findTime: '',
        gradeId: '',
        categoryId: '',
        status: '',
        hiddenDangerDesc: '',
      },
      showTrouble: false, //新增隐患弹窗
      hiddenTroubleInfo: {}, // 当前操作的隐患信息
      showLoading: false,
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 头部统计
      governanceStatistics: {
        orgNum: '0',
        totalNum: '0',
        assignNum: '0',
        continueNum: '0',
        checkedNum: '0',
        completeNum: '0',
        overdueNum: '0',
      },
      defaultTabsName: {},
      hiddenDangerInfo: {},
      // audio集合
      audioList: {},
    }
  },
  created: function () {
    let that = this
    // 绑定下拉框
    if (that.$store.state.userinfo.isMuilUnitUser === 1) {
      getOrgList({ queryType: 0 }).then((res) => {
        that.orgOptions = res.data
      })
    }
    // 绑定隐患等级下拉框
    getDictByCode({ code: 49 }).then((res) => {
      that.gradeOptions = res.data.dictValueObj
    })
    // 绑定隐患类型下拉框
    getDictByCode({
      code: 50,
      dictKey: 1,
    }).then((res) => {
      that.categoryOptions = JSON.parse(res.data.dictValueObj[0].dictValue)
    })
    if (this.$route.params && this.$route.params.desc) {
      this.searchForm.hiddenDangerDesc = this.$route.params.desc
    }
    that.getList()
  },
  methods: {
    handleDownload(url, name) {
      downloadAudio(url, name)
    },
    //子组件传值
    parentEvent(data) {
      if (data == false) {
        this.showLoading = false
      } else {
        this.showLoading = true
      }
    },
    // 获取隐患统计信息
    getStatis() {
      let that = this
      let parames = {
        orgIds: that.searchForm.orgIds,
        gradeId: that.searchForm.gradeId,
        categoryId: that.searchForm.categoryId,
        status: that.searchForm.status,
        startTime:
          that.searchForm.findTime && that.searchForm.findTime.length > 0
            ? that.searchForm.findTime[0] + ' 00:00:00'
            : '',
        endTime:
          that.searchForm.findTime && that.searchForm.findTime.length > 0
            ? that.searchForm.findTime[1] + ' 23:59:59'
            : '',
        desc: that.searchForm.hiddenDangerDesc, //隐患描述
      }
      getHiddenManagerStatistics(parames).then((res) => {
        $.extend(that.governanceStatistics, res.data)
      })
    },
    // 获取列表信息
    getList(_pageIndex, _pageSize) {
      //获取列表
      if (_pageIndex) {
        this.currentPage = _pageIndex
      }
      if (_pageSize) {
        this.pageSize = _pageSize
      }
      let that = this
      let parames = {
        startTime:
          that.searchForm.findTime && that.searchForm.findTime.length > 0
            ? that.searchForm.findTime[0] + ' 00:00:00'
            : '',
        endTime:
          that.searchForm.findTime && that.searchForm.findTime.length > 0
            ? that.searchForm.findTime[1] + ' 23:59:59'
            : '',
        timeType: 2,
        orgIds: that.searchForm.orgIds,
        gradeId: that.searchForm.gradeId,
        categoryId: that.searchForm.categoryId,
        status: that.searchForm.status,
        hiddenDangerDesc: that.searchForm.hiddenDangerDesc,
        queryType: 1,
        pageIndex: that.currentPage - 1,
        pageSize: that.pageSize,
      }
      that.loading = true
      getHiddenDangerList(parames).then((res) => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
      // 获取统计信息
      that.getStatis()
    },
    addTrouble() {
      let _this = this
      _this.showTrouble = true
    },
    // 导出
    outputInfo() {
      if (this.$store.state.resetHiddenDangerExporting) {
        return this.$message.warning('请稍后操作')
      }
      if (typeof this.searchForm.orgIds === 'string') {
        return this.$message.warning('请选择业主单位 !')
      }
      if (this.total === 0) {
        return this.$message.warning('当前列表没有数据不能导出')
      }
      this.$store.commit('setResetHiddenDangerExporting', true)
      fetch(
        this.GLOBAL.baseURL +
          'hiddenDanger/hiddenDangerListExport?' +
          objectToQueryString({
            orgIds: this.searchForm.orgIds,
            hiddenDangerDesc: this.searchForm.hiddenDangerDesc,
            gradeId: this.searchForm.gradeId,
            categoryId: this.searchForm.categoryId,
            status: this.searchForm.status,
            startTime: this.searchForm.findTime
              ? this.searchForm.findTime[0]
              : '',
            endTime: this.searchForm.findTime
              ? this.searchForm.findTime[1]
              : '',
          })
      )
        .then((res) => res.blob())
        .then((blob) => {
          downloadExcel(
            blob,
            `建筑消防设施故障维修记录表（${
              this.$store.state.userinfo.isMuilUnitUser === 1
                ? this.orgOptions.find(
                    (item) => item.organizationId === this.searchForm.orgIds
                  ).shortName
                : this.$store.state.userinfo.org.name
            }）.xlsx`
          )
          this.$message.success('导出成功')
          this.$store.commit('setResetHiddenDangerExporting', false)
        })
        .catch((e) => {
          this.$message.error('导出失败')
          this.$store.commit('setResetHiddenDangerExporting', false)
        })
    },
    closeAddTrouble() {
      let _this = this
      _this.showTrouble = false
      _this.getList()
    },
    formatterStatus(val) {
      let statusText = ''
      if (val == 1) {
        statusText = '整改中'
      } else if (val == 2) {
        statusText = '已完成'
      } else if (val == 3) {
        statusText = '核实中'
      } else if (val == 5) {
        statusText = '待指派'
      }
      return statusText
    },
    formatterStatusColor(type) {
      if (type == 1) {
        return 'bg-color-6'
      } else if (type == 2) {
        return 'bg-color-3'
      } else if (type == 5) {
        return 'bg-color-4'
      } else {
        return 'bg-color-8'
      }
    },
    // 详情
    handleDetail(row) {
      let that = this
      if (row && !that.hiddenDangerInfo.hasOwnProperty(row.id)) {
        that.$set(that.timeLineLoading, row.id, true)
        // 获取详细信息
        getHiddenDanger({
          id: row.id,
        }).then((res) => {
          that.$set(that.hiddenDangerInfo, row.id, res.data)
          that.$set(that.timeLineLoading, row.id, false)
        })
      }
      that.$set(that.defaultTabsName, row.id, 'hiddenDangerInfo')
      this.$refs.mainTable.toggleRowExpansion(row)
    },
    // 页码切换
    pageSizeChange(val) {
      this.getList(1, val)
    },
    // 翻页
    pageChange(val) {
      this.getList(val)
    },
    // 播放录音
    playAudio(id, hiddenDangerVoice) {
      let that = this
      // 停止其他的音频播放
      for (let key in that.audioList) {
        if (key != 'weixinAudio_' + id) {
          that.audioList[key].weixinAudio0.stop()
        }
      }
      if (!that.audioList['weixinAudio_' + id]) {
        if (
          hiddenDangerVoice != null &&
          hiddenDangerVoice != '' &&
          hiddenDangerVoice != undefined
        ) {
          that.audioList['weixinAudio_' + id] = $(
            '.weixinAudio_' + id
          ).weixinAudio({
            autoplay: false,
            src: hiddenDangerVoice,
          })
        } else {
          that.$message({
            type: 'warning',
            message: '暂时没有录入语音！',
          })
        }
      }
    },
    // 删除
    deleteInfo(row) {
      // 阻止事件冒泡
      event.stopPropagation()
      let that = this
      if (row) {
        this.$confirm('确认删除该条隐患吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true,
        })
          .then(() => {
            delHiddenDangerById({ id: row.id }).then((res) => {
              if (res.status === 200) {
                that.$message({
                  type: 'success',
                  message: '删除成功!',
                })
                setTimeout(() => {
                  that.getList(1)
                }, 1000)
              } else {
                that.$message({
                  type: 'warning',
                  message: res.info,
                })
              }
            })
            // 阻止事件冒泡
            event.stopPropagation()
          })
          .catch(() => {})
      }
    },
  },
}
</script>
<style lang="scss">
.real-high-risk-wrap .demo-table-expand .el-form-item {
  margin-bottom: 0;
}

.hidden-danger-rectification-wrap .el-tag {
  font-size: 14px;
  margin-bottom: 5px;
}
.hidden-danger-rectification-wrap .right-btn {
  float: right;
}
.videoPreview {
  .container-imgpre {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
